<%@ page import="ar.com.photo_admin.domain.Event"%>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta name="layout" content="main">
</head>
<body>
	<div class="page-header">
		<h1>
			<g:message code="event.existing" />
		</h1>
	</div>

	<g:if test="${flash.message}">
		<div class="alert alert-success">
			<a class="close" data-dismiss="alert">×</a>
			<div class="message">
				${flash.message}
			</div>
		</div>
	</g:if>
	
	<g:if test="${flash.error}">
		<div class="alert alert-error">
			<a class="close" data-dismiss="alert">×</a>
			<div class="message">
				${flash.error}
			</div>
		</div>
	</g:if>

	<sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_PHOTOGRAPHER">
		<g:link elementId="btnCreateEvent" class="btn btn-success"
			controller="event" action="create">
			<g:message code="event.new" />
		</g:link>
		
		<div class="separator"></div>
	</sec:ifAnyGranted>

	<g:if test="${events || params.q}">

		<form class="form-search search">
		  <div class="input-append">
		    <input name="q" type="text" class="span2 search-query" value="${params.q}">
		    <g:actionSubmit class="btn" action="list" value="Search"/>
		  </div>
		</form>
			
		<div class="btn-group sortBy">
			  <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
			    <g:message code="sort.sortBy" />
			    <span class="caret"></span>
			  </a>
			  
			  <ul class="dropdown-menu">
			  
		  		<g:each in="${sortStrategies}" var="strategy">
					<li>
						<a data-toggle="modal" href="${createLink(action: 'list', params: [sort: strategy.name(), order: strategy.order, q: params.q])}">
							<i class="icon-ok ${strategy.name() != params.sort ? 'icon-white' : ''}"></i> ${message(code: 'sort.' + strategy)}
						</a>
					</li>
				</g:each>
			  
			  </ul>		  
		</div>
			
		<div class="separator"></div>
		<div class="separator"></div>

		<g:if test="${!events && params.q}">
			<div class="alert alert-warning">
				<a class="close" data-dismiss="alert">×</a>
				<div class="message">
					<g:message code="event.search.noEvents" />
				</div>
			</div>
		</g:if>
		
		<div class="row">
			<g:each in="${events}" var="event">

				<div id="eventContainer${event?.id}" class="span3 gridElement">
					<p>${event?.name}</p>

					<div class="gridImage">

						<g:link controller="event" action="show" id="${event.id}">
							<g:if test="${event.coverPhoto}">
								<img
									src="${event?.coverPhoto?.getPublishedThumbnailMediumUrl()}"
									class="gridMediumImage img-rounded"></img>
							</g:if>
							<g:else>
								<img src="${resource(dir:'images', file: 'defaultImage.jpg')}"
									class="gridMediumImage img-rounded"></img>
							</g:else>
						</g:link>
					</div>

					<div class="gridBottomElement">
						<div><g:formatDate format="dd-MM-yyyy" date="${event?.eventDate}" /></div>
						<g:isEventClientOrOwner eventId="${event?.id}">
							<a href="${createLink(controller: 'eventAlbumToken', action: 'create', id: event?.id)}"> 
								<g:img class="gridBottomButton imageBorderSmall" title="${message(code: 'event.share')}" file="share2.png" />
							</a>
						</g:isEventClientOrOwner>
						
						<g:if test="${event?.deleted}">
							<g:isAdmin>
								<a href="${createLink(controller: 'event', action: 'restore', id: event?.id)}"> 
									<g:img class="gridBottomButton" file="restore.png" />
								</a>
							</g:isAdmin>
						</g:if>
						<g:else>
							<g:isEventOwner  eventId="${event?.id}">
								<g:img id="event${event?.id}" class="gridBottomButton" data-toggle="modal" data-target="#deleteEventModal" dir="images" file="DeleteRed_s.png" />
							</g:isEventOwner>		
						</g:else>
					</div>
				</div>
			</g:each>
		</div>
		
		<g:form controller="event" action="delete">
			<g:hiddenField id="event_id" name="id" />
			<g:actionSubmit id="delete" action="delete" value=" " class="hidden"/>
		</g:form>
		
		<div class="pagination">
			<g:paginate controller="event" action="list" total="${eventSize}" params="[q : params.q]" />	
		</div>	
	
	</g:if>
	<g:else>
		<div class="alert alert-warning">
			<a class="close" data-dismiss="alert">×</a>
			<div class="message">
				<g:message code="event.noEvents" />
			</div>
		</div>
	</g:else>
	
	<g:render template="/common/deleteConfirmationPopup" model='[button_text:"${message(code: 'event.delete')}", msg:"${message(code: 'event.delete.confirm')}", deleteConfirmButtonId:"deleteEventButtonConfirm", deleteModalId:"deleteEventModal"]'/>   
	
	<script type="text/javascript">	
       
		jQuery(document).ready(function(){
	
		    jQuery('.gridBottomButton').click(function () {		    		    	
		    	var eventId = jQuery(this).prop("id").replace("event","");		
				jQuery('#event_id').val(eventId);																					
		    });
	
			jQuery('#deleteEventButtonConfirm').click(function () {
				jQuery('#delete').click();
			});			
		});
	
    </script>
</body>
</html>